<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import CustomTabBar from '@/components/custom-tab-bar/custom-tab-bar.vue';
	import {
		apiGetActivityById
	} from '../../api/volunteer.js';
	import {
		apiVolunteerActivity
	} from '../../api/volunteer.js'

	function goBack() {
		wx.navigateBack({
			delta: 1 // 返回上一页面
		})
	};
	const recordsString = ref(null);
</script>
<script>
	export default {
		data() {
			return {
				records: null, // 创建响应式变量records
				activityName: null,
				res: null,
				tags: [],
			};
		},

		onLoad(options) {
			// 从查询参数中获取 records 字符串


			console.log(options.records);
			// 使用 async/await 处理异步函数
			this.records = options.records;
			this.getActivityById();

		},
		methods: {
			async getActivityById() {
				try {
					console.log(this.records); //使用全局响应式变量,且使用时必须加this
					// console.log(this.records);
					// console.log(this.records);
					// console.log(this.records);
					// console.log(this.records);
					// console.log(this.records);
					this.res = await apiGetActivityById(this.records);
					this.tags = this.res.data.tag.split(/,|，|\s+/); // 将tag字段按逗号、中文逗号或空格分割成数组
					console.log(this.res.data); // 确保在 res 解析后再访问 

					console.log(this.res.data.activityName);

				} catch (error) {
					console.error("Error fetching activity:", error);
					// 处理错误，例如显示错误消息给用户
				}
			},
			 ClickNoUse() {
				uni.showToast({
					title: "功能尚未开放",
					icon: 'none', // 如果不想要默认的图标，可以设置为'none'
					duration: 2000 // 显示时长，默认为2000毫秒
				});
			},
			async signup(data) {
				try {
					console.log(data); // 使用全局响应式变量,且使用时必须加this
					const back = await apiVolunteerActivity(
						data); // 这是在没有语法糖setup的script中使用异步的第二种方式，这种函数如果不异步就会无法定义back.msg
					console.log(back.code);

					let modalContent = back.msg; // 默认弹窗内容为back.msg
					if (back.code === 1) {
						modalContent = back.data; // 当back.code等于1时，弹窗内容为back.data
					}

					uni.showModal({
						title: '提示',
						content: modalContent
					});

				} catch (error) {
					console.error("Error fetching activity:", error);
					// 处理错误，例如显示错误消息给用户
				}
			}

		}
	}
</script>


<template>
	<view class="container">
		<view class="header">
			<view class="title">[{{res.data.activityName}}]志愿服务</view>
			<view class="sub-title">
				<view>发布组织：<span class="anwser">{{res.data.organization}}</span></view>
				<view>活动编号：<span class="anwser">{{res.data.id}}</span></view>
			</view>
			<view class="tag">
				<view class="tag-item" v-for="item in tags">{{ item }}</view>
			</view>
		</view>
		<view class="content">
			<view class="content-title">活动信息</view>
			<view class="activity-info">
				<view>地点：<span class="anwser">{{res.data.activityLocation}}</span> </view>
				<view>联系方式：<span class="anwser">{{res.data.contact}}</span> </view>
			</view>
			<view class="content-title">志愿者招募详情</view>
			<view class="volunteer-info">
				<view>时间段： <span class="anwser"></span> {{res.data.beginTime}}-{{res.data.endTime}}</view>
				<view>报名人数： <span class="anwser">{{res.data.addNumber}}/{{res.data.recruitNumber}}</span> </view>
				<view>招募岗位：<span class="anwser">{{res.data.recruitmentPositions}}</span> </view>
			</view>
			<view class="content-title">报名须知</view>
			<view class="notice">
				<view>报名限制： <span class="anwser">{{res.data.enrollmentRestrictions}}</span> </view>
				<view>报名截止时间： <span class="anwser">{{res.data.registrationDeadline}}</span></view>
				<view>报名须知： <span class="anwser">1、天气多变，请志愿者出门注意天气变化。
						2、在服务过程中服务组织安排，态度热情、积极主动。
						3、需要全程参与。
						4、在公益活动中请注意保护自己和同伴个人安全，不要擅自承诺或者捐献，杜绝发生任何借贷关系，避免受伤害和财产损失。</span></view>
			</view>
			<view class="content-title">活动介绍</view>
			<view class="description">
				<view>活动简介：<span class="anwser">{{res.data.eventDescription}}</span></view>
				<view>活动内容：<span class="anwser">{{res.data.eventContent}}</span></view>
			</view>
			<view class="activity-pic">

				<image :src="res.data.eventPhoto" mode="widthFix"></image><!-- 远程加载图片不可以用{{}} -->
			</view>
		</view>
		<view class="footer">
			<view class="btn"><uni-icons type="image" size="26" color="#fff" style="margin-top: 10rpx;" @tap="ClickNoUse" ></uni-icons>
				<span>转发好友</span>
			</view>
			<view class="btn" @tap="signup(res.data.id)">剩余{{res.data.recruitNumber-res.data.addNumber}}| 立即报名</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.container {
		padding: 15rpx;

		.header {
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 0 30rpx;
			background-color: #fff;
			box-shadow: rgb(231, 231, 231) 0px -1rpx inset;

			.anwser {
				color: #000000e6;
				word-break: break-all;
				overflow-wrap: break-word;
				/* 确保长字符串在必要时换行 */
				hyphens: auto;
				/* 自动插入断字符 */
			}

			.title {
				font-size: 40rpx;
				font-weight: bold;
				margin-bottom: 20rpx;

			}

			.sub-title {
				display: flex;
				flex-direction: column;
				justify-content: center;
				font-size: 32rpx;
				color: #0006;
				margin-bottom: 20rpx;

			}

			.tag {
				display: flex;
				margin-bottom: 20rpx;

				.tag-item {
					width: 100rpx;
					height: 40rpx;
					background-color: #FFECF0;
					border-radius: 20rpx;
					text-align: center;
					line-height: 40rpx;
					color: #FB4457;
					font-size: 24rpx;
					padding: 10rpx 20rpx;
					margin-right: 20rpx;

				}

			}

		}

		.content {
			padding: 30rpx;
			background-color: #fff;

			.content-title {
				font-size: 34rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
			}

			view {
				margin-bottom: 20rpx;
			}


			.activity-info {
				display: flex;
				flex-direction: column;
				justify-content: center;
				font-size: 32rpx;
				color: #0006;
				margin-bottom: 20rpx;
				box-shadow: rgb(231, 231, 231) 0px -1rpx inset;
			}

			.volunteer-info {
				display: flex;
				flex-direction: column;
				justify-content: center;
				font-size: 32rpx;
				color: #0006;
				margin-bottom: 20rpx;
				box-shadow: rgb(231, 231, 231) 0px -1rpx inset;

			}

			.notice {
				display: flex;
				flex-direction: column;
				justify-content: center;
				font-size: 32rpx;
				color: #0006;
				margin-bottom: 20rpx;
				box-shadow: rgb(231, 231, 231) 0px -1rpx inset;
			}

			.description {
				display: flex;
				flex-direction: column;
				justify-content: center;
				font-size: 32rpx;
				color: #0006;
				margin-bottom: 20rpx;
				box-shadow: rgb(231, 231, 231) 0rpx -1rpx inset;


			}

			.anwser {
				color: #000000e6;
			}

			.activity-pic {
				image {
					width: 100%;
					height: 300rpx;
					border-radius: 20rpx;

				}

				margin-bottom: 120rpx;
			}

		}

		.footer {
			display: flex;
			justify-content: space-between;
			//固定定位
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 20rpx;
			background-color: #fff;
			box-shadow: rgb(231, 231, 231) 0px 1rpx inset;

			.btn {
				width: 45%;
				height: 80rpx;
				line-height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;
				background-color: #ffd700;
				color: #fff;
				border-radius: 20rpx;
				font-size: 32rpx;
				border-radius: 40rpx;

				&:nth-child(2) {
					background-color: #FB4457;
					color: #fff;

				}

			}

		}

	}
</style>